window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var big_img = document.querySelector('.bigImg');
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mousemove', move);
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';

    })
    function move(e) {
        //mask
        var maskX = -mask.offsetWidth / 2 + e.pageX - preview_img.offsetLeft;
        var maskY = -mask.offsetHeight / 2 + e.pageY - preview_img.offsetTop
        if (maskX < 0) {
            maskX = 0;
        }
        if (maskY < 0) {
            maskY = 0
        }
        if (maskX + mask.offsetWidth > preview_img.offsetWidth) {
            maskX = preview_img.offsetWidth - mask.offsetWidth;
        }
        if (maskY + mask.offsetHeight > preview_img.offsetHeight) {
            maskY = preview_img.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';


        //big
        big_img.style.left = -(maskX / 100 * 300) + 'px';
        big_img.style.top = -(maskY / 100 * 300) + 'px';


    }


})